<script>
import {
  TABLE_FIELD_QUARTER, TABLE_FIELD_YEAR,
} from '@/config'

/* IFTRUE_ONLY_NANCHANG
import { loadCompanyProduct } from '@/api/enterpriseQuarterlyReport2'
FITRUE_ONLY_NANCHANG */
/* IFTRUE_NOT_NANCHANG */
import { loadCompanyProduct } from '@/api/enterpriseQuarterlyReport'
/* FITRUE_NOT_NANCHANG */

import { uuid } from '@/utils'

import EnergyTableMixin from '@/components/quarterly-account-table-new/energy-table-mixin'
import ArrowSelectMixin from '@/components/quarterly-account-table-new/arrow-select-mixin'
import ContextMenuMixin from '@/components/quarterly-account-table-new/context-menu-mixin'

export default {
  name: 'company-product-list',
  mixins: [EnergyTableMixin, ContextMenuMixin, ArrowSelectMixin],
  created () {
    this.loadList = loadCompanyProduct;
  },
  methods: {
    transfer (lists) {
      return lists.map(v => {
        const data = this.flattenColumns.map(vv => {
          const key = vv.prop
          const value = String(!this.is_empty_value(v[key]) ? v[key] : '')
          if (this.readonly) {
            return {
              key,
              value,
              editable: false,
            }
          }
          return {
            key,
            value,
            editable: true,
          }
        })
        return {
          uuid: uuid(),
          data: data,
          informant: {
            personInCharge: v.personInCharge,
            informer: v.informer,
            telephone: v.telephone,
            fillInDate: v.fillInDate,
          }
        }
      })
    },
    // 初始化表数据
    initLists (params, needInformant = true) {
      // 查询企业填报的数据
      if (this.loadList) {
        params = params || {
          [TABLE_FIELD_YEAR]: this.year,
          [TABLE_FIELD_QUARTER]: this.quarter,
          tenantId: this.enterpriseId
        }
        return this.loadList(params).then(async res => {
          if (res.code === 200) {
            const data = res.data || []
            this.isKept = !needInformant;
            this.lists = this.transfer(data)

            if (!this.fromGovernmentSide) {
              // 补足企业端不足行的数据
              const l = this.lists.length
              this._initLists(l, 2)
            }

            this.$nextTick(() => {
              this.initInputIndex()
            })
          }
        }).catch(() => {
          console.log('reject')
          this._initLists(0, 2)
          this.$nextTick(() => {
            this.initInputIndex()
          })
        })
      }
    },
  },
}
</script>

<template>
  <div class="bg-white height-100 quarterly-account-table position-relative overflow-hidden">
    <slot name="title" :title="title">
      <h2 class="table-title">
        {{title}}
      </h2>
    </slot>
    <div class="report-table-head">
      <table class="report-table">
        <table-head :columns="columns" :show-line-number="showLineNumber"></table-head>
      </table>
    </div>
    <el-scrollbar :style="{height: 'calc(100% - 130px)'}" wrap-style="overflow-x: hidden;">
      <table class="report-table">
        <tbody ref="tbody">
          <tr v-for="(item, i) in lists" :key="item.uuid">
          <th v-if="showLineNumber" class="readonly width-40px line-number">{{i + 1}}</th>
          <td v-for="(d, index) in item.data" :key="item.uuid + index">
            <div v-if="!d.editable" class="span-cell">
              {{d.value}}
            </div>
            <div v-else class="input-cell">
              <input
                type="text" v-model="d.value"
                @click="clickHandler($event, i)" @contextmenu="onContextmenu($event, i)"
              >
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <report-person ref="reportPerson" :is-kept="isKept" :informer="informant" :readonly="readonly"></report-person>
      <div v-if="tableDescription" class="fill-description">
        <template>
          <!-- <p>说明：</p>
          <p>1．主要逻辑审核关系：</p>
          <p class="padding-horizontal">(1) 消费合计=工业生产消费+非工业生产消费。</p>
          <p class="padding-horizontal">(2) 工业生产消费≥用于原材料。</p>
          <p class="padding-horizontal">(3) 消费合计≥运输工具消费。</p>
          <p>2．企业只填写本企业消耗的有关能源品种数值。如本表未包括企业消耗的能源品种，企业应根据统计部门要求归并入相应能源品种内。</p>
          <p>3．能源合计=∑某种能源×某种能源折标准煤系数（不重复计算“其中”项）。</p>
          <p>4．综合能源消费量的计算方法：</p>
          <p class="padding-horizontal">(1)非能源加工转换企业：综合能源消费量=工业生产消费的能源折标量合计-回收利用折标量合计。</p>
          <p class="padding-horizontal">(2)能源加工转换企业：综合能源消费量=工业生产消费的能源折标量合计-能源加工转换产出折标量合计-回收利用折标量合计。</p> -->

          <el-input type="textarea" class="width-100 table-description" :value="tableDescription" readonly autosize></el-input>
        </template>
      </div>
    </el-scrollbar>
    <transition name="el-fade-in">
      <ul v-if="visible" :style="{left:left+'px', top: top + 'px'}" class="contextmenu">
        <li style="color:var(--danger-color);" @click="delRow">删除当前行</li>
        <li class="divider"></li>
        <li @click="prependRow">在上方插入一行</li>
        <li @click="appendRow">在下方插入一行</li>
      </ul>
    </transition>
  </div>
</template>
